<template>
  <login-head @change="getLoginBtn"></login-head>
  <div class="login">
    <login-panel
      v-if="hasAnumber"
      :loginErrMsg="loginErrMsg"
      :login="login"
      :forget="forget"
      @getLogoMsg="doLogin"
      @resetPassword="doForget"
    />
    <login-in @doLogin="doUserLogin" v-else />
  </div>
</template>

<script setup lang="ts">
import Cookies from 'js-cookie'
import { ElMessage } from 'element-plus'
import LoginPanel from './c-cpns/login-panel.vue'
import loginHead from './c-cpns/login-head.vue'
import LoginIn from './c-cpns/login-in.vue'
import { userLogin } from '@/service/login/login'
import { ref, reactive, onMounted } from 'vue'
import useLoginStore from '@/store/login/login'
import useUserStore from '@/store/user/user'
import { changeUserData } from '@/service/user/user'
const loginStore = useLoginStore()
const userStore = useUserStore()

//页面加载之前先读取本地的Cookie
onMounted(() => {
  if (Cookies.get('USER_NAME')) {
    login.userEmail = window.atob(Cookies.get('USER_NAME') || '')
    login.password = window.atob(Cookies.get('PASS_WORD') || '')
  }
})

//登录与注册的切换
const hasAnumber = ref<Boolean>(true)
const getLoginBtn = (e: any) => {
  hasAnumber.value = e
  userStore.$reset()
}

//登录类型
type loginType = {
  userEmail: string | undefined
  password: string | undefined
}
const login = reactive<loginType>({
  userEmail: '',
  password: ''
})

//忘记密码类型
type forgetType = {
  userEmail: string
  password: string
}
const forget: forgetType = {
  userEmail: '',
  password: ''
}
//登录的错误消息
const loginErrMsg = reactive({
  emailErrorMsg: '',
  passwordErrorMsg: ''
})
//登录
const doLogin = (account: any, rememberMe: Boolean) => {
  userLogin(account)
    .then((e: any) => {
      //发送网络请求成功
      //判断是否需要记住密码(不要,就移除cookie,并return)
      if (e.code == 1) {
        //登陆成功
        if (!rememberMe) {
          Cookies.remove('USER_NAME')
          Cookies.remove('PASS_WORD')
        } else {
          // 需要记住密码，往下,转码,编码成base64存入cookie,有效期为7天
          Cookies.set('USER_NAME', window.btoa(account.userEmail), { expires: 1 })
          Cookies.set('PASS_WORD', window.btoa(account.password), { expires: 1 })
        }
        //将用户信息保存
        userStore.userMessage = e.data
        // 如果正确则存入对于token，并将账号和密码用base64进行加密后保存到cookie
        loginStore.loginUserAction(e.token)
        ElMessage({
          message: '登陆成功！',
          type: 'success'
        })
      } else {
        //登录失败
        ElMessage.error('登录失败')
        if (e.msg == '2') {
          loginErrMsg.passwordErrorMsg = '密码错误！'
        } else {
          loginErrMsg.emailErrorMsg = '邮箱错误！'
        }
      }
    })
    .catch((e: any) => {
      //登录报错
      ElMessage.error('登录失败，网络出现问题！！')
    })
}
//忘记密码
const doForget = (account: any) => {
  changeUserData(account)
    .then((res: any) => {
      console.log(res)
      ElMessage({
        message: '修改成功！',
        type: 'success'
      })
    })
    .catch((err: any) => {
      ElMessage.error('修改失败！')
    })
}

//注册
type userLoginType = {
  userBust: string
  nickname: string
  password: string
  userEmail: string
  age: number
  sex: string
}
let userMessage: userLoginType = {
  userBust: '',
  nickname: '',
  password: '',
  userEmail: '',
  age: 0,
  sex: ''
}
const doUserLogin = async (value: any) => {
  const { userBust, nickname, password, userEmail, age, sex } = value
  userMessage = { userBust, nickname, password, userEmail, age, sex }
  userStore.userLogin(userMessage)
  userStore.$reset()
}
</script>

<style lang="less" scoped>
.login {
  display: flex;
  align-items: center;
  background-color: #eec0c6;
  background-image: linear-gradient(315deg, #eec0c6 20%, #7ee8fa 124%);

  justify-content: center;
  width: 100%;
  height: 100%;
}
</style>
